<script type="text/javascript">
    var _root = 'http://formbuild/index.php?s=/', _controller = 'index';
</script>

<style>   
    #components{
        min-height: 700px;
    }
    #target{
        min-height: 700px;
        border: 1px solid #ccc;
        padding: 5px;
    }
    #source{
        min-height: 800px;
    }
</style>
<!--link href="Public/css/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"-->
<section class="content">
    <div class="row">
        <div class="col-md-8">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab_preview" data-toggle="tab">预览</a></li>
                    <li><a href="#tab_source_pane" data-toggle="tab" id='tab_source'>源代码</a></li>
                    <li class="pull-right"><a  id="button_save" href="javascript:void(0);" class="btn btn-success btn-small"><i class='fa fa-save'></i> 保存</a></li>
                    <li class="pull-right"><a id ="button_review" href="javascript:void(0);" class="btn btn-primary btn-small"><i class='fa fa-desktop'></i> 预览</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_preview">
                        <div class="box box-solid" style="margin-bottom: 0px">
                            <div class="box-header with-border">
                                <h3 class="box-title">{$one.form_name}<small>-表单设计器</small></h3>
                                <div class="box-tools pull-right">
                                    <div class="checkbox">
                                        <label>
                                            {:Form::checkbox('layout', '', $one.layout,['id'=>'layout'])} 同行布局 
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <input id ='form_id' type="hidden" name="form_id" value="{$one.id}">
                            <form role='form' class='{$one.layout}'>
                                <div id="target" class="box-body" >
                                    {$one.content}
                                </div>                           
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab_source_pane">
                        {:Form::editor('source', $one.content, ['id'=>'source','data-rule'=>'required','readonly'=>true])}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default panel-intro">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#1" data-toggle="tab">常用控件</a></li>
                        <li><a href="#2" data-toggle="tab">下拉列表</a></li>
                        <li><a href="#3" data-toggle="tab">日期时间</a></li>
                        <li><a href="#4" data-toggle="tab">其他组件</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <form>
                        <div class="tab-content">
                            <div class="tab-pane active" id="1">
                                <ul class="nav nav-pills nav-stacked components">
                                    <li>
                                        <a href="#"><i class="fa fa-edit"></i>自定义HTML</a>
                                        <div class='content hide'>
                                            <div class="form-group"  data-type="html">
                                                <div class='html'>自定义HTML代码</div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-edit"></i>文本框</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="input">
                                                <label class="plugins-label">文本框</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='文本框'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-edit"></i>多行文本框</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="textarea">
                                                <label class="plugins-label">多行文本框</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='多行文本框'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-edit"></i>富文本编辑器</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="editor">
                                                <label class="plugins-label">富文本编辑器</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='富文本编辑器'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-check-square-o"></i>复选控件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="checkboxs">
                                                <label class="plugins-label">复选控件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='复选控件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-check-circle-o"></i>单选控件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="radios">
                                                <label class="plugins-label">单选控件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='单选控件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-toggle-on"></i>开关控件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="switcher">
                                                <label class="plugins-label">开关控件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='开关控件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-toggle-on"></i>滑块控件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="slider">
                                                <label class="plugins-label">滑块控件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='滑块控件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <!-- Multiple radios end -->
                            </div>
                            <div class="tab-pane" id="2">
                                <ul class="nav nav-pills nav-stacked components">
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>下拉列表</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="select">
                                                <label class="plugins-label">下拉菜单</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='下拉列表'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>下拉列表(多选)</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selects">
                                                <label class="plugins-label">下拉列表(多选)</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='下拉列表(多选)'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>下拉列表(友好)</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectpicker">
                                                <label class="plugins-label">下拉列表(友好)</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='下拉列表(友好)'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>下拉列表(友好)(多选)</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectpickers">
                                                <label class="plugins-label">下拉列表(友好)(多选)</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='下拉列表(友好)(多选)'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>动态下拉列表</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectpage">
                                                <label class="plugins-label">动态下拉列表</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='动态下拉列表'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>动态下拉列表(多选)</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectpages">
                                                <label class="plugins-label">动态下拉列表(多选)</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='动态下拉列表(多选)'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>城市选择组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="citypicker">
                                                <label class="plugins-label">城市选择组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='城市选择组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-toggle-on"></i>选择数字区间</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectRange">
                                                <label class="plugins-label">选择数字区间</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='选择数字区间'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-toggle-on"></i>联动选择</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="cxselect">
                                                <label class="plugins-label">联动选择</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='联动选择'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-toggle-on"></i>字段列表组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="fieldlist">
                                                <label class="plugins-label">字段列表组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='字段列表组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <!-- Multiple radios end -->
                            </div>
                            <div class="tab-pane" id="3">
                                <ul class="nav nav-pills nav-stacked components">
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>日期选择组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="datepicker">
                                                <label class="plugins-label">日期选择组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='日期选择组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>时间选择组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="timepicker">
                                                <label class="plugins-label">时间选择组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='时间选择组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>日期时间选择组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="datetimepicker">
                                                <label class="plugins-label">日期时间选择组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='日期时间选择组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>日期区间组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="daterange">
                                                <label class="plugins-label">日期区间组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='日期区间组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>时间区间组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="timerange">
                                                <label class="plugins-label">时间区间组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='时间区间组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>日期时间区间组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="datetimerange">
                                                <label class="plugins-label">日期时间区间组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='日期时间区间组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>选择年</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectYear">
                                                <label class="plugins-label">选择年</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='选择年'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-navicon"></i>选择月</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="selectMonth">
                                                <label class="plugins-label">选择月</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='选择月'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-pane" id="4">
                                <ul class="nav nav-pills nav-stacked components">
                                    <li>
                                        <a href="#"><i class="fa fa-upload"></i>上传文件组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="upload">
                                                <label class="plugins-label">上传文件组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='上传文件组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-upload"></i>上传文件组件(多文件)</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="uploads">
                                                <label class="plugins-label">上传文件组件(多文件)</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='上传文件组件(多文件)'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-upload"></i>上传图片组件</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="image">
                                                <label class="plugins-label">上传图片组件</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='上传图片组件'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-upload"></i>上传图片组件(多图)</a>
                                        <div class='content hide'>
                                            <div class="form-group" data-type="images">
                                                <label class="plugins-label">上传图片组件(多图)</label>
                                                <div class="plugins"></div>
                                                <div class="options hide">
                                                    <input type="hidden" data-name='NewField' data-title='上传图片组件(多图)'/>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>    
                </div>
            </div>
        </div>
    </div>
</section>